<template>
  <div>
    <t-card
      class='list-card-container'
      :bordered='false'
    >
      <t-row justify='space-between'>
        <div class='left-operation-container'>

          <t-button @click='add()'>新增救助活动</t-button>

          <t-button
            variant='base'
            theme='default'
            :disabled='!selectedRowKeys.length'
          > 导出救助审核通过名单
          </t-button>
          <p
            v-if='!!selectedRowKeys.length'
            class='selected-count'
          >已选{{ selectedRowKeys.length }}项</p>
        </div>
        <t-input
          v-model='searchValue'
          class='search-input'
          placeholder='请输入你需要搜索的内容'
          clearable
        >
          <template #suffix-icon>
            <search-icon size='20px' />
          </template>
        </t-input>
      </t-row>

      <div class='table-container'>
        <t-table
          :columns='columns'
          :data='data'
          :rowKey='rowKey'
          :verticalAlign='verticalAlign'
          :hover='hover'
          :pagination='pagination'
          :selected-row-keys='selectedRowKeys'
          :loading='dataLoading'
          @page-change='rehandlePageChange'
          @change='rehandleChange'
          @select-change='rehandleSelectChange'
          :headerAffixedTop='true'
          :headerAffixProps='{ offsetTop: offsetTop, container: getContainer }'
        >
          <template #status='{ row }'>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.FAIL'
              theme='danger'
              variant='light-outline'
            >审核失败
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.AUDIT_PENDING'
              theme='warning'
              variant='light-outline'
            >待审核
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.EXEC_PENDING'
              theme='warning'
              variant='light-outline'
            >待通过
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.EXECUTING'
              theme='success'
              variant='light-outline'
            >审核通过
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.FINISH'
              theme='success'
              variant='light-outline'
            >已完成
            </t-tag>
          </template>
          <template #contractType='{ row }'>
            <p v-if='row.contractType === CONTRACT_TYPES.MAIN'>审核失败</p>
            <p v-if='row.contractType === CONTRACT_TYPES.SUB'>待审核</p>
            <p v-if='row.contractType === CONTRACT_TYPES.SUPPLEMENT'>审核通过</p>
          </template>
          <template #paymentType='{ row }'>
            <p
              v-if='row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT'
              class='payment-col'
            >
              付款
              <trend
                class='dashboard-item-trend'
                type='up'
              />
            </p>
            <p
              v-if='row.paymentType === CONTRACT_PAYMENT_TYPES.RECIPT'
              class='payment-col'
            >
              收款
              <trend
                class='dashboard-item-trend'
                type='down'
              />
            </p>
          </template>

          <template #op='slotProps'>
            <a
              class='t-button-link'
              @click='handleClickDetail()'
            >详情</a>
            <a
              class='t-button-link'
              @click='handleClickDelete(slotProps)'
            >删除</a>
          </template>
        </t-table>
      </div>
    </t-card>
    <t-dialog
      header='确认删除当前的救助活动？'
      :body='confirmBody'
      :visible.sync='confirmVisible'
      @confirm='onConfirmDelete'
      :onCancel='onCancel'
    >
    </t-dialog>
  </div>
</template>
<script lang='ts'>
import {SearchIcon} from 'tdesign-icons-vue';
import Trend from '@/components/trend/index.vue';
import {prefix} from '@/config/global';

import {CONTRACT_STATUS, CONTRACT_STATUS_OPTIONS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES} from '@/constants';

export default {
  name: 'ListBase',
  components: {
    SearchIcon,
    Trend,
  },
  data () {
    return {
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data: [
        {
          "index": 1,
          "status": 1,
          "no": "BH0045",
          "name": "第十三次田化村救助活动",
          "paymentType": 0,
          "contractType": 0,
          "updateTime": "2020-05-30 08:24:02",
          "amount": "救助",
          "adminName": "龙勇"
        },
        {
          "index": 2,
          "status": 3,
          "no": "BH006",
          "name": "筹集折翼小狗资金",
          "paymentType": 1,
          "contractType": 2,
          "updateTime": "2020-05-30 06:32:40",
          "amount": "宣传",
          "adminName": "崔霞"
        },
        {
          "index": 3,
          "status": 4,
          "no": "BH0071",
          "name": "救助中华狸花猫",
          "paymentType": 0,
          "contractType": 0,
          "updateTime": "2020-05-30 18:03:55",
          "amount": "救助",
          "adminName": "武敏"
        },
        {
          "index": 4,
          "status": 2,
          "no": "BH0027",
          "name": "为折翼小狗进行募捐",
          "paymentType": 0,
          "contractType": 0,
          "updateTime": "2020-05-30 08:04:17",
          "amount": "检查",
          "adminName": "阎秀英"
        },
        {
          "index": 5,
          "status": 1,
          "no": "BH0068",
          "name": "BP0036",
          "paymentType": 0,
          "contractType": 2,
          "updateTime": "2020-05-30 05:31:56",
          "amount": "检查",
          "adminName": "熊磊"
        },
        {
          "index": 6,
          "status": 0,
          "no": "BH0015",
          "name": "BP004",
          "paymentType": 0,
          "contractType": 0,
          "updateTime": "2020-05-30 16:35:40",
          "amount": "检查",
          "adminName": "薛磊"
        },
        {
          "index": 7,
          "status": 3,
          "no": "BH0082",
          "name": "BP0096",
          "paymentType": 1,
          "contractType": 1,
          "updateTime": "2020-05-30 03:27:42",
          "amount": "检查",
          "adminName": "姚静"
        },
        {
          "index": 8,
          "status": 4,
          "no": "BH00100",
          "name": "BP006",
          "paymentType": 0,
          "contractType": 2,
          "updateTime": "2020-05-30 07:26:48",
          "amount": "检查",
          "adminName": "武伟"
        },
        {
          "index": 9,
          "status": 1,
          "no": "BH0024",
          "name": "BP0084",
          "paymentType": 0,
          "contractType": 1,
          "updateTime": "2020-05-30 17:30:18",
          "amount": "救助",
          "adminName": "易娜"
        },
        {
          "index": 10,
          "status": 3,
          "no": "BH0092",
          "name": "BP0078",
          "paymentType": 1,
          "contractType": 1,
          "updateTime": "2020-05-30 17:30:59",
          "amount": "救助",
          "adminName": "曹磊"
        },
        {
          "index": 11,
          "status": 3,
          "no": "BH0088",
          "name": "BP0062",
          "paymentType": 0,
          "contractType": 2,
          "updateTime": "2020-05-30 19:29:48",
          "amount": "救助",
          "adminName": "李娟"
        },
        {
          "index": 12,
          "status": 2,
          "no": "BH0073",
          "name": "BP0057",
          "paymentType": 0,
          "contractType": 0,
          "updateTime": "2020-05-30 23:32:10",
          "amount": "救助",
          "adminName": "薛丽"
        },
        {
          "index": 13,
          "status": 1,
          "no": "BH0075",
          "name": "BP0043",
          "paymentType": 1,
          "contractType": 2,
          "updateTime": "2020-05-30 12:15:42",
          "amount": "救助",
          "adminName": "唐敏"
        },
        {
          "index": 14,
          "status": 3,
          "no": "BH0012",
          "name": "BP0032",
          "paymentType": 1,
          "contractType": 0,
          "updateTime": "2020-05-30 22:45:51",
          "amount": "检查",
          "adminName": "赖平"
        },
        {
          "index": 15,
          "status": 1,
          "no": "BH0050",
          "name": "BP0015",
          "paymentType": 1,
          "contractType": 1,
          "updateTime": "2020-05-30 05:55:40",
          "amount": "宣传",
          "adminName": "薛磊"
        },
        {
          "index": 16,
          "status": 1,
          "no": "BH0032",
          "name": "BP0036",
          "paymentType": 0,
          "contractType": 1,
          "updateTime": "2020-05-30 21:22:44",
          "amount": "救助",
          "adminName": "侯刚"
        },
        {
          "index": 17,
          "status": 2,
          "no": "BH0085",
          "name": "BP0080",
          "paymentType": 1,
          "contractType": 2,
          "updateTime": "2020-05-30 01:16:24",
          "amount": "救助",
          "adminName": "孙明"
        },
        {
          "index": 18,
          "status": 2,
          "no": "BH0024",
          "name": "BP0026",
          "paymentType": 0,
          "contractType": 2,
          "updateTime": "2020-05-30 17:59:54",
          "amount": "宣传",
          "adminName": "何军"
        },
        {
          "index": 19,
          "status": 1,
          "no": "BH0087",
          "name": "BP0040",
          "paymentType": 1,
          "contractType": 0,
          "updateTime": "2020-05-30 10:11:10",
          "amount": "宣传",
          "adminName": "萧秀兰"
        },
        {
          "index": 20,
          "status": 1,
          "no": "BH0090",
          "name": "BP0024",
          "paymentType": 1,
          "contractType": 1,
          "updateTime": "2020-05-30 05:35:29",
          "amount": "宣传",
          "adminName": "汪娜"
        },
        {
          "index": 21,
          "status": 0,
          "no": "BH0048",
          "name": "BP0052",
          "paymentType": 1,
          "contractType": 1,
          "updateTime": "2020-05-30 16:52:18",
          "amount": "救助",
          "adminName": "马杰"
        }
      ],
      selectedRowKeys: [],
      value: 'first',
      columns: [
        {colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left'},
        {title: '救助活动名称', align: 'left', width: 250, ellipsis: true, colKey: 'name', fixed: 'left',},
        {title: '审核状态', colKey: 'status', width: 200, cell: {col: 'status'}},
        {title: '救助活动编号', width: 200, ellipsis: true, colKey: 'no',},
        {title: '救助类型', width: 200, ellipsis: true, colKey: 'amount',},
        {align: 'left', fixed: 'right', width: 200, colKey: 'op', title: '操作',},
      ],
      rowKey: 'index',
      tableLayout: 'auto',
      verticalAlign: 'top',
      hover: true,
      rowClassName: (rowKey: string) => `${rowKey}-class`,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 10,
        total: 0,
        defaultCurrent: 1,
      },
      searchValue: '',
      confirmVisible: false,
      deleteIdx: -1,
    };
  },
  computed: {
    confirmBody () {
      if (this.deleteIdx > -1) {
        const {name} = this.data?.[this.deleteIdx];
        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
      }
      return '';
    },
    offsetTop () {
      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
    },
  },
  mounted () {
    this.dataLoading = false;
  },

  methods: {
    getContainer () {
      return document.querySelector('.tdesign-starter-layout');
    },
    rehandlePageChange (curr, pageInfo) {
      console.log('分页变化', curr, pageInfo);
    },
    rehandleSelectChange (selectedRowKeys: number[]) {
      this.selectedRowKeys = selectedRowKeys;
    },
    rehandleChange (changeParams, triggerAndData) {
      console.log('统一Change', changeParams, triggerAndData);
    },
    handleClickDetail () {
      this.$router.push('/help/detail');
    },
    add () {
      this.$router.push('/help/publish');
    },
    handleClickDelete (row: { rowIndex: any }) {
      this.deleteIdx = row.rowIndex;
      this.confirmVisible = true;
    },
    onConfirmDelete () {
      // 真实业务请发起请求
      this.data.splice(this.deleteIdx, 1);
      this.pagination.total = this.data.length;
      const selectedIdx = this.selectedRowKeys.indexOf(this.deleteIdx);
      if (selectedIdx > -1) {
        this.selectedRowKeys.splice(selectedIdx, 1);
      }
      this.confirmVisible = false;
      this.$message.success('删除成功');
      this.resetIdx();
    },
    onCancel () {
      this.resetIdx();
    },
    resetIdx () {
      this.deleteIdx = -1;
    },
  },
};
</script>

<style
  lang='less'
  scoped
>
@import '@/style/variables';

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 0 0 6px 0;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: var(--td-comp-margin-s);
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}

.t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}
</style>
